<template>
    <n-card>
        <n-form ref="formRef" label-placement="top" :label-width="80">
            <template v-for="item in list" :key="item.id">
                <n-form-item
                    v-if="item.configKey == 'server_msg_encrypt_type'"
                    :label="item.name"
                >
                    <n-radio-group v-model:value="item.configValue">
                        <n-space>
                            <n-radio value="1"> 明文模式 </n-radio>
                            <n-radio value="2"> 兼容模式 </n-radio>
                            <n-radio value="3"> 安全模式（推荐） </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item v-else-if="item.configKey == 'limit_pay'" :label="item.name">
                    <n-radio-group v-model:value="item.configValue">
                        <n-space>
                            <n-radio value=""> 无限制 </n-radio>
                            <n-radio value="no_credit"> 不能使用信用卡 </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item v-else-if="item.configKey == 'receipt'" :label="item.name">
                    <n-radio-group v-model:value="item.configValue">
                        <n-space>
                            <n-radio value="Y"> 开放 </n-radio>
                            <n-radio value="no_credit"> 不开放 </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item
                    v-else-if="item.configKey == 'server_data_format'"
                    :label="item.name"
                >
                    <n-radio-group v-model:value="item.configValue">
                        <n-space>
                            <n-radio value="XML"> XML </n-radio>
                            <n-radio value="JSON"> JSON </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item
                    v-else-if="item.configKey == 'server_domain_url'"
                    :label="item.name"
                >
                    <jb-input
                        v-model:value="item.configValue"
                        :maxlength="255"
                        :disabled="true"
                        :placeholder="`请输入${item.name}的值`"
                    ></jb-input>
                </n-form-item>
                <n-form-item
                    v-else-if="item.configKey == 'music_post_mediaid'"
                    :label="item.name"
                >
                    <jb-input
                        v-model:value="item.configValue"
                        :maxlength="255"
                        :disabled="true"
                        :placeholder="`请输入${item.name}的值`"
                    ></jb-input>
                </n-form-item>
                <n-form-item v-else :label="item.name" path="type">
                    <jb-input
                        v-model:value="item.configValue"
                        :maxlength="255"
                        :placeholder="`请输入${item.name}的值`"
                    ></jb-input>
                </n-form-item>
            </template>

            <template v-for="item in list" :key="item.id">
                <n-form-item
                    v-if="item.configKey == 'music_post_mediaid'"
                    label=""
                    class="flex justify-center items-center"
                >
                    <jb-upload v-model="item.configValue">
                        <div class="flex-col items-center">
                            <span>上传素材到微信服务器，获取MediaId</span>
                            <div
                                class="w-100px h-100px mt-10"
                                style="background-color: #cdcde6"
                            ></div>
                        </div>
                    </jb-upload>
                </n-form-item>
            </template>
        </n-form>

        <template #footer>
            <div class="flex justify-end">
                <jb-btn type="primary" @click="submit">保存</jb-btn>
            </div>
        </template>
    </n-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { FormInst } from 'naive-ui'
import { JBoltApi } from '@/utils'
import { ResData } from '@/typings/request'
import JbUpload from '@/components/_builtin/jb-upload/index.vue'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = '/api/admin/wechatConfig/submitBaseConfig'
    await JBoltApi.tryPost(url, {
        mpId: props.id,
        configs: list.value
    })
    return true
}

const list = ref<ResData[]>([])

onMounted(() => {
    if (props.id) {
        JBoltApi.get<ResData>(`/api/admin/wechatConfig/baseMgr/${props.id}`).then(
            ({ result }) => {
                result.data.forEach((item: any) => {
                    if (item.configKey == 'server_msg_encrypt_type') {
                        item.configValue = item.configValue || '3'
                    } else {
                        item.configValue = item.configValue || ''
                    }
                })
                list.value = result.data
            }
        )
    }
})
</script>

<style scoped></style>
